<template lang="pug">
  .tool-box-wrapper
    .tool-box-return(@click="returnToMap")
      i.iconfont.icon-location
    .tool-box-zoom
      .zoom-add(@click="setZoom(1)")
        i.iconfont.icon-add
      .zoom-shrink(@click="setZoom(-1)")
        i.iconfont.icon-shrink2
    .tool-box-layer(@click="openLayerContent = !openLayerContent")
      img(:src="layerCurImg")
    .layers-content(v-show="openLayerContent")
      .layer(
        v-for="(layer, index) of mapLayers"
        :key="index"
        :class="{curLayer: layerCurImg === layer.img}"
        @click="curImg(layer)")
        img(:src="layer.img")
        span {{ layer.name }}
</template>

<script>
/**
 * @name ToolBox 分区监控-工具
 * @author caixq <caixq@gddxit.com>
 * @description Arcgis 分区监控总览地图缩放、回归、切换视图功能
 */
import satellite from '../../../../assets/img/satellite.png'
import gis from '../../../../assets/img/gis.png'
import sign from '../../../../assets/img/sign.png'
import night from '../../../../assets/img/night.png'
export default {
  name: 'ToolBox',
  data () {
    return {
      mapLayers: [
        { name: '卫星图', value: 'baseLayer_st', img: satellite },
        { name: '标记图', value: 'baseLayer', img: sign },
        { name: '夜间图', value: 'nightLayer', img: night },
        { name: '管线图', value: 'layerN', img: gis }
      ],
      // 默认选中的图层
      layerCurImg: sign,
      // 控制选择图层控件是否出现
      openLayerContent: false
    }
  },
  methods: {
    // 地图回归中心点并缩放比例
    returnToMap () {
      this.$emit('returnToMap')
    },
    // 控制地图缩放比例
    setZoom (zoom) {
      this.$emit('setZoom', zoom)
    },
    // 选择图层
    curImg (layer) {
      this.$emit('changeLayer', layer)
      this.layerCurImg = layer.img
    }
  }
}
</script>

<style lang="sass" scoped>
@mixin general($height)
  width: 36px
  height: $height
  line-height: 36px
  text-align: center
  border: 1px solid #ccc
  border-radius: 4px
  box-shadow: 0px 0px 10px #dfdfdf
  background: #fff
  cursor: pointer
  margin-bottom: 15px
@mixin gen-font($font)
  font-size: $font
  color: #9f9f9f
.tool-box-wrapper
  .tool-box-return
    @include general(36px)
    >i
      @include gen-font(24px)
    &:hover
      color: #27a1f7
  .tool-box-zoom
    @include general(72px)
    @include gen-font(15px)
    padding: 0 8px
    .zoom-add
      border-bottom: 1px solid #ccc
      &:hover
        color: #27a1f7
    .zoom-shrink:hover
      color: #27a1f7
  .tool-box-layer
    @include general(36px)
    >img
      width: 100%
      height: 100%
      padding: 1px 3px 5px
  .layers-content
    position: absolute
    bottom: 0px
    left: -400px
    background: #fff
    border-radius: 5px
    .layer
      float: left
      position: relative
      margin: 5px
      border: 1px solid transparent
      border-radius: 3px
      cursor: pointer
      > span
        display: block
        border-radius: 3px
        position: absolute
        bottom: 0
        right: 0
        font-size: 10px
        padding: 0 3px
        background: #fff
    .layer:hover, .curLayer
      border: 1px solid #008dcf
      span
        background: #008dcf
        color: #fff
</style>
